
<template>
  <u-tabbar 
    :value="currentIndex" 
    @change="handleChange"
    :fixed="true"
    :safeAreaInsetBottom="true"
  >
    <u-tabbar-item 
      v-for="item in tabList" 
      :key="item.id"
      :class="item.isMiddle ? 'middle-item' : ''"
    >
      <image 
        slot="active-icon" 
        :src="item.activeIcon" 
        :class="item.isMiddle ? 'middle-icon' : ''"
      ></image>
      <image 
        slot="inactive-icon" 
        :src="item.inactiveIcon"
        :class="item.isMiddle ? 'middle-icon' : ''"
      ></image>
    </u-tabbar-item>
  </u-tabbar>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tabList: [
        {
          id: 0,
          text: "首页",
          activeIcon: "/static/tab-home-active.png",
          inactiveIcon: "/static/tab-home.png",
          pagePath: "/pages/index/index"
        },
        {
          id: 1,
          text: "", // 中间项不显示文字
          activeIcon: "/static/tab-center-active.png",
          inactiveIcon: "/static/tab-center.png",
          pagePath: "/pages/center/index",
          isMiddle: true // 标记为中间凸起项
        },
        {
          id: 2,
          text: "我的",
          activeIcon: "/static/tab-user-active.png",
          inactiveIcon: "/static/tab-user.png",
          pagePath: "/pages/user/index"
        }
      ]
    }
  },
  methods: {
    handleChange(index) {
      uni.switchTab({ url: this.tabList[index].pagePath })
    }
  }
}
</script>

<style scoped>
.middle-item {
  transform: translateY(-15px);
  z-index: 999;
}
.middle-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
</style>
